import useCurrentUser from '@/utils/useCurrentUser';
import { history } from '@umijs/max';
import { Button, Result, ConfigProvider, theme } from 'antd';
import React, { useState, useEffect } from 'react';

const NoFoundPage = () => {
  const [mode, setmode] = useState('light');
  const { updateUser, currentUser } = useCurrentUser();

  useEffect(() => {
    setmode(currentUser?.theme);
  }, [currentUser?.theme]);


  return <ConfigProvider
    theme={{
      cssVar: true,
      hashed: false,
      algorithm: mode === 'light' ? theme.algorithm : theme.darkAlgorithm,
      token: {
        colorPrimary: mode === 'light' ? '#1B6FFE' : '#a1f6fb',
        colorSecondary: mode === 'light' ? '#1B6FFEdd' : '#a1f6fb9f',
        colorBorder: mode === 'light' ? '#f0f0f0' : '#333',
        colorBgSecondary: mode === 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.04)',
        colorBgLighter: mode === 'light' ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.2)',
        colorBgCard: mode === 'light' ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.3)',
        colorBgreSecondary: mode !== 'light' ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.4)',
        colorBgThird: mode === 'light' ? '#ddd' : 'rgba(0,0,0,0.4)',
        colorBgFourth: mode === 'light' ? '#f9f9f9' : '#333333',
        colorBgSixth: mode === 'light' ? '#f9f9f9' : '#222222',
        colorBgFifth: mode === 'light' ? '#333333' : '#999999',
        colorBgSeven: mode === 'light' ? '#f0f0f0' : '#202020',
        subMenuItemBg: mode === 'light' ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)',
        colorOppsite: mode === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)',
        colorOppsites: mode === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
        colorError:
          currentUser?.waringType === true ? 'rgba(236, 119, 135,0.5)' : 'rgb(236, 119, 135,0.5)',
        colorWarning:
          currentUser?.waringType === true ? 'rgba(242, 154, 90,0.5)' : 'rgba(242, 154, 90,0.5)',
        colorSuccess: '#27C160',
        colorleftNav: mode === 'light' ? 'rgba(0, 0, 0, 0.19)' : 'rgba(0,0,0,0.55)',
        colorleftNavBar: mode === 'light' ? 'rgba(0, 0, 0, 0.06)' : 'rgba(0,0,0,0.1)',
      },
      components: {
        Segmented: {
          itemSelectedColor: mode === 'light' ? '#1B6FFE' : '#a1f6fb',
        },
        Progress: {
          circleTextFontSize: 12,
        },
        Menu: {
          collapsedWidth: 60,
          itemBg: 'transparent',
          itemSelectedBg: 'transparent',
          itemActiveBg: 'transparent',
          itemHoverBg: 'transparent',
          activeBarBorderWidth: 0
        }
      },
    }}
  >
    <Result
      status="404"
      title="404"
      subTitle="对不起，您访问的页面不存在！"
      extra={
        <Button type="primary" onClick={() => history.push('/')}>
          返回首页
        </Button>
      }
    />
  </ConfigProvider>
};

export default NoFoundPage;
